<template>
  <div class="container">
    <div class="ul">
      <div class="li flex" v-for="(item,index) in lists" :key="index">
        <span>{{item.title}}</span>
        <van-icon name="close" class="close" @tap="del_info(item.id)"/>
      </div>
    </div>
    <div class="send flex">
      <div class="input">
        <input
          type="text"
          cursor-spacing="11.5"
          :value="content"
          placeholder="请输入性格喜好,不要超过15个字"
          placeholder-style="font-size: 28rpx;color: rgba(153,153,153,0.5)"
          @input="input"
        >
      </div>
      <div class="button flex flex-item" @tap="send">
        <span>发送</span>
      </div>
    </div>
    <van-dialog id="van-dialog"/>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import Dialog from '../../../../static/vant/dialog/dialog'
export default {
  data () {
    return {
      guest_id: '',
      lists: [],
      userInfo: {},
      content: ''
    }
  },
  components: {
  },
  async onLoad () {
    const that = this
    // 接收客户id
    that.guest_id = that.$route.query.id
    // 存储员工信息
    that.userInfo = wx.getStorageSync('userInfo')
    that.get_info()
  },
  methods: {
    async get_info () {
      const that = this
      const res = await api.getguestnaturedate({
        guest_id: that.guest_id,
        type: 2
      })
      if (res.code === '100') {
        that.lists = res.data
      } else {
        that.list = ''
        Toast(res.msg, 'noicon')
      }
    },
    del_info (id) {
      const that = this
      if (!that.userInfo.authority.guest_del_rizhi) {
        Toast('您没有权限删除日志!', 'noicon')
        return false
      }
      Dialog.confirm({
        title: '提示',
        message: '确定删除本条信息吗?'
      }).then(async () => {
        const res = await api.postdelnaturedate({
          id: id
        })
        if (res.code === '100') {
          that.get_info()
        }
        Toast(res.msg, 'noicon')
      }).catch(() => {

      })
    },
    input (e) {
      this.content = e.mp.detail.value
    },
    async send (e) {
      const that = this
      if (!that.userInfo.authority.guest_add_rizhi) {
        Toast('您没有权限添加日志!', 'noicon')
        return false
      }
      if (that.content === '') {
        Toast('请输入内容!', 'noicon')
        return false
      }
      if (that.content.length > 35) {
        Toast('不要输入太多字!', 'noicon')
        return false
      }
      const postInfo = {
        guestid: that.guest_id,
        userid: that.userInfo.user_id,
        title: that.content,
        type: 2,
        approve: 1
      }
      const res = await api.postaddguestnature({
        post_info: JSON.stringify(postInfo)
      })
      if (res.code === '100') {
        that.content = ''
        that.get_info()
      }
      Toast(res.msg, 'noicon')
    }
  }
}
</script>

<style scoped>
.container {
  padding-top: 16rpx;
}
.ul {
  width: 100%;
}
.li {
  float: left;
  position: relative;
  box-shadow: 0px 6rpx 20rpx rgba(255, 68, 68, 0.1);
  background-color: #fff;
  border-radius: 10rpx;
  margin: 18rpx 0 0 16rpx;
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
}
.li span {
  padding: 10rpx 60rpx;
}
.li .close {
  position: absolute;
  top: 4rpx;
  right: 10rpx;
}
.send {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110rpx;
  background-color: #fff;
}
.send .input {
  width: 582rpx;
  height: 64rpx;
  padding-left: 32rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background-color: rgba(153, 153, 153, 0.1);
  margin-left: 48rpx;
}
.send .input input {
  width: 100%;
  height: 100%;
  border-radius: 30rpx;
}
.send .button {
  font-size: 32rpx;
  color: rgba(102, 102, 102, 1);
  height: 100%;
}
</style>